import React, { useEffect, useRef, useState } from 'react';
import TableDataBlock from '@/components/TableDataBlock';
import { Tag, Card, Button, Popover, Space } from 'antd';
import { priceType_status, liveType_status } from '@/common/contact';
import { connect, history } from 'umi';
import PopImgShow from '@/components/PopImgShow';
import DeleteModel from './components/DeleteModel';
import RenderShopCard from './components/RenderShopCard';
import { secKill_status } from '@/common/contact';
import { liveListLink } from '@/common/historyLinkShop';
const LiveList = (props) => {
  const { loading, list, dispatch } = props;
  const { location = {} } = history;
  const { query = {} } = location;
  const { id, type = 'list' } = query;
  const [deleteVisible, setDeleteVisible] = useState(false);
  useEffect(() => {
    if (type === 'detail') {
      setVisible({
        show: true,
        detail: {
          id,
        },
      });
    }
  }, []);

  const btnExtra = [
    {
      text: '新建活动',
      onClick: () => {
        history.push({
          pathname: '/marketingModule/createSecKill',
        });
      },
    },
  ];
  const searchItems = [
    { label: '关键词', name: 'keyword' },
    { label: '状态', name: 'status', type: 'select', select: secKill_status },
  ];
  const childRef = useRef();
  const handleCallback = () => {
    childRef.current.fetchGetData();
  };
  const handleReload = () => {
    childRef.current.reloadData();
  };

  const getColumns = [
    {
      title: '活动名称',
      dataIndex: 'secKillName',
    },
    {
      title: '活动状态',
      dataIndex: 'status',
      render: (e) => {
        const renderStatus = {
          0: <Tag color="warning">{secKill_status[e]}</Tag>,
          1: <Tag color="success">{secKill_status[e]}</Tag>,
          2: <Tag color="#f50">{secKill_status[e]}</Tag>,
          3: <Tag color="default">{secKill_status[e]}</Tag>,
        }[e];
        return renderStatus;
      },
    },
    {
      title: '有效期',
      dataIndex: 'secKillStartTime',
      render: (e, record) => {
        const { secKillStartTime, secKillEndTime } = record;
        return (
          <Space direction={'vertical'}>
            <div>起：{secKillStartTime}</div>
            <div>止：{secKillEndTime}</div>
          </Space>
        );
      },
    },
    {
      title: '活动商品总量',
      dataIndex: 'secKillStock',
    },
    {
      title: '预约人数',
      dataIndex: 'reverseUserAmount',
    },
    {
      title: '已购数量',
      dataIndex: 'saleAmount',
    },
    {
      title: '成交金额（元）',
      dataIndex: 'saleMoney',
      render: (e) => {
        return e ? `¥${e}` : '--';
      },
    },

    {
      type: 'handle',
      width: 200,
      dataIndex: 'id',
      render: (val, record) => [
        {
          auth: true,
          title: '查看',
          click: () => {
            dispatch({
              type: 'login/findAccessId',
              payload: {
                pathname: '/marketingModule/createSecKill',
                query: {
                  id: val,
                },
              },
            });
          },
        },
        {
          type: 'del',
          click: () => {
            dispatch({
              type: 'liveStreaming/fakeDeleteGoodsSecKill',
              payload: {
                id: val,
              },
              callback: () => {
                handleReload();
              },
            });
          },
        },
      ],
    },
  ];
  return (
    <>
      <TableDataBlock
        cRef={childRef}
        cardProps={{ title: '秒杀活动' }}
        btnExtra={btnExtra}
        loading={loading}
        searchItems={searchItems}
        columns={getColumns}
        rowKey={(record) => `${record.id}`}
        dispatchType="liveStreaming/fetchListGoodsSecKill"
        {...list}
      ></TableDataBlock>
      <DeleteModel
        handleCallback={handleReload}
        onClose={() => setDeleteVisible(false)}
        visible={deleteVisible}
      ></DeleteModel>
    </>
  );
};
export default connect(({ loading, liveStreaming }) => ({
  list: liveStreaming.secKillList,
  loading: loading.models.liveStreaming,
}))(LiveList);
